#@layout()
#define script()
<script src="#(CPATH)/static/components/editable/js/bootstrap-editable.min.js"></script>
<script src="#(CPATH)/static/components/selectize/selectize.min.js"></script>
<script src="#(CPATH)/static/components/highlight/highlight.pack.js"></script>

#render(editor.js ??)


<script>

    $(".submitBtn").on("click", function () {
        doSubmit();
    });


    window.doSubmit = function () {

        if (window.onEditorSubmitBefore) {
            onEditorSubmitBefore()
        }

        ajaxSubmit("#form", function (data) {
            $("#jobId").attr("value", data.id);
            window.history.replaceState({}, '', `#(CPATH)/admin/job/edit/` + data.id)
            toastr.success('岗位保存成功。');
        });
    };

    setSaveHotKeyFunction(doSubmit);

    $(".chooseAttachment").on("click", function () {
        var $this = $(this);
        layer.open({
            type: 2,
            title: '选择附件',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/browse?uititle=附件',
            end: function () {
                if (layer.data.src != null) {
                    var src = layer.data.src;
                    var title = layer.data.title;
                    //video ".mp4", ".avi", ".wmv", ".mpeg", ".mov", ".mkv", ".flv", ".rmvb", ".rm", ".3gp", ".ts", ".vob", ".m3u8"
                    if (src.endsWith(".mp4") || src.endsWith(".avi") || src.endsWith(".wmv") || src.endsWith(".mpeg") || src.endsWith(".mov")
                        || src.endsWith(".mkv") || src.endsWith(".flv") || src.endsWith(".rmvb") || src.endsWith(".rm") || src.endsWith(".3gp") ||
                        src.endsWith(".ts") || src.endsWith(".vob") || src.endsWith(".m3u8")) {
                        insertVideoToEditor && insertVideoToEditor(src, title)
                    }

                    //image ".jpg", ".jpeg", ".png", ".bmp", ".gif", ".webp"
                    else if (src.endsWith(".jpg") || src.endsWith(".jpeg") || src.endsWith(".png")
                        || src.endsWith(".bmp") || src.endsWith(".gif") || src.endsWith(".webp")) {
                        insertImageToEditor && insertImageToEditor(src, title)
                    }
                    // other file
                    else {
                        insertAttachementToEditor && insertAttachementToEditor(src, title)
                    }
                }
            }
        });
    })

    $(function () {
        // 设置按钮
        $("#rightSwitch").click(function () {
            $(this).toggleClass('switch-btn');
            $(".rightPanel").toggle();
            $(".leftPanel").toggleClass("col-lg-12", "col-lg-3");
        });
        // 设置编辑器的高度
        var headerHeight = $(".page-header ").innerHeight();
        var mainHeight = $(".main-header").innerHeight();
        var editorHeight = $(window).height() - parseFloat(headerHeight) - parseFloat(mainHeight);
        $('#editor').css({
            "min-height": editorHeight
        })
    })

    //插入视频
    $(".chooseVideo").on("click", function () {
        var $this = $(this);
        layer.open({
            type: 2,
            title: '选择视频',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/video/browse?uititle=视频',
            end: function () {

                if (layer.data.uid != null) {

                    var uid = layer.data.uid;
                    var cover = jpress.cpath + layer.data.cover;

                    var video = document.createElement('video');
                    video.setAttribute("data-vid", uid);
                    video.setAttribute("poster", cover);
                    video.setAttribute('style', "height:240px;width:425px;")
                    video.setAttribute("class", "jpress-video");

                    //视频播放容器的id
                    var idStr = "video_player_container"+(Math.random()).toString().slice(5,10)
                    video.setAttribute('id', idStr);

                    insertHtmlToEditor(video.outerHTML);

                }
            }
        });

    })

    //选择表单
    $(".chooseForm").on("click", function () {
        var $this = $(this);

        layer.open({
            type: 2,
            title: '选择表单',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/form/browse',
            end: function () {

                if (layer.data.uid) {

                    var formUUID = layer.data.uid;

                    var formName = layer.data.name;

                    let html = '<div><div class="jpress-form-card" contenteditable="false" data-form-id=' + formUUID + '>' + formName + '（表单）</div></div><br />'

                    insertHtmlToEditor(html);

                }
            }
        })

    })


</script>

#end
#define css()
<link href="#(CPATH)/static/components/editable/css/bootstrap-editable.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.bootstrap4.css" rel="stylesheet">
<link href="#(CPATH)/static/components/highlight/styles/github.css" rel="stylesheet">

<style>
    .main-footer.text-sm, .main-footer {
        display: none !important;
    }

    .content-wrapper {
        position: relative;
        min-height: calc(100vh - calc(3.5rem + 1px));
        overflow: hidden;
    }

    .panelContainer {
        position: relative;
        height: calc(100% - 71px);
    }

    .popover-content {
        padding: 9px 14px;
        margin: 0 10px;
    }

    #slug {
        cursor: pointer;
    }

    .vditor-wysiwyg pre.vditor-reset:focus {
        outline: none;
        background-color: #fff;
    }

    .article-header i {
        font-size: 22px;
        cursor: pointer;
    }

    .boder-bottom {
        border-bottom: 1px solid #d9d9d9;
    }

    .setting-dropmenu {
        width: 300px;
        top: 100%;
        left: initial !important;
        right: 0;
    }

    .tab-content {
        height: 100%;
    }

    .leftPanel {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .leftPanel::-webkit-scrollbar {
        width: 0;
    }

    .rightPanel {
        position: sticky;
        height: 100%;
        overflow-y: scroll;
        border-left: #efefef solid 1px;
    }

    .pannel-inner {
        width: 100%;
        height: auto;
        padding-left: 0 !important;
        overflow-x: hidden;
    }

    #formAttrTab .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
        border: none;
        border-bottom: 4px solid #fff;
        position: relative;
        top: -1px;
        color: #333;
        font-size: 15px;
    }

    #formAttrTab .nav-link.active {
        border: none;
        border-bottom: 4px solid #0056b3;
        color: #0056b3;
        font-size: 15px;
    }

    .dropdown-item {
        padding: .75rem 1rem;
    }

    .card {
        margin-bottom: 0rem;
        border-radius: 0;
    }

    .ck-editor__editable_inline {
        height: calc(100vh - 158px);
    }

    #rightSwitch {
        display: inline-block;
        padding: 3px 6px 2px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #fff;
    }

    .switch-btn {
        display: inline-block;
        padding: 3px 6px 2px;
        border-radius: 4px;
        cursor: pointer;
        background-color: #000;
        border: 1px solid #000;
    }

    .switch-btn i, .switch-btn-active i {
        color: #fff;
        font-size: 18px !important;
        vertical-align: middle;
    }

    .switch-btn-active {
        border: 1px solid #fff;
        background-color: #fff;
    }

    .switch-btn-active i {
        font-size: 18px !important;
        color: #0069d9;
    }

    .ck-editor .ck-sticky-panel .ck-sticky-panel__content .ck-toolbar_grouping {
        background: #fff;
        height: 45px;
        border-top: none;
    }

    .ck-source-editing-area{
        min-height:100vh;
        height:auto;
    }
</style>
#end

#define content()

<section class="content" style="position: absolute;height:100%;width:100%;padding: 0">

    <form action="#(CPATH)/admin/job/doSave" method="post" id="form" class="h-100 bg-white">

        <section class="article-header d-flex justify-content-between align-items-center p-3 boder-bottom bg-white">
            <div class="d-flex align-items-center justify-content-between" style="width: 40%">
                <div class="input-group mr-2">
                    <div class="input-group-prepend">
                        <span class="input-group-text">岗位名称</span>
                    </div>
                    <textarea type="text" rows="1" class="form-control" placeholder="请输入岗位名称..." name="job.title"
                              autocomplete="off"
                              id="job-title">#(job.title ??)</textarea>
                </div>

                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="insertFile" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        插入附件
                    </button>
                    <div class="dropdown-menu" aria-labelledby="insertFile">
                        <a class="dropdown-item chooseAttachment" href="#">插入附件</a>
                        <a class="dropdown-item chooseVideo" href="#">插入视频</a>
                        <a class="dropdown-item chooseForm" href="#">插入表单</a>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between">
                <button type="button" data-status="normal" class="btn btn-primary mr-2 submitBtn">发布</button>
                <span class="switch-btn" id="rightSwitch"><i class="bi bi-gear" style="font-size:18px"></i></span>
            </div>
        </section>


<!--        <input type="hidden" id="appId" name="appId" value="#(appId ??)">-->
        <input type="hidden" id="jobId" name="job.id" value="#(job.id ??)">
        <div class="row panelContainer">
            <div class="col-lg-9  leftPanel pr-0">
                <div class="pannel-inner">
                    <div class="form-group mb-0">

                        <div class="">

                            #render(editor.html, name="job.content", content = job.getHtml() ??)

                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 pl-0 pr-0 rightPanel">
                <div class="pannel-inner">
                    <ul class="nav nav-tabs" id="formAttrTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab"
                               href="#main-tab" role="tab" aria-controls="component" aria-selected="true">岗位</a>
                        </li></ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="main-tab" role="tabpanel">
                            <div class="accordion">


                                <!--基础-->
                                <div class="card">
                                    <div class="card-header">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#fields-card">
                                                基础
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="fields-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group row">
                                                <label class="col-sm-12">最小年龄</label>
                                                <div class="col-sm-12">

                                                    <input type="number" name="job.age_limit_start" class="form-control"
                                                           value="#(job.age_limit_start ??)"
                                                           placeholder="请输入最小年龄">
                                                </div>
                                            </div>


                                            <div class="form-group row">
                                                <label class="col-sm-12">最大年龄</label>
                                                <div class="col-sm-12">

                                                    <input type="number" name="job.age_limit_end" class="form-control"
                                                           value="#(job.age_limit_end ??)"
                                                           placeholder="请输入最大年龄">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-12">部门</label>
                                                <div class="col-sm-12">

                                                    <input type="text" name="job.department" class="form-control"
                                                           value="#(job.department ??)"
                                                           placeholder="请输入部门">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-12">岗位招聘人数</label>
                                                <div class="col-sm-12">

                                                    <input type="text" name="job.recruit_numbers" class="form-control"
                                                           value="#(job.recruit_numbers ??)"
                                                           placeholder="请输入岗位招聘人数">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-12">岗位有效时间</label>
                                                <div class="col-sm-12">

                                                    <input type="text" class="form-control datetime" placeholder="点击选择"
                                                           name="job.expired_to"
                                                           value="#date(job.expired_to ?? now,'yyyy-MM-dd')">
                                                </div>
                                            </div>

                                            <div class="form-group row" style="display: none">
                                                <label class="col-sm-12">岗位创建时间</label>
                                                <div class="col-sm-12">

                                                    <input type="text" class="form-control datetime" placeholder="点击选择"
                                                           name="job.created"
                                                           value="#date(job.created ??,'yyyy-MM-dd')"
                                                           readonly="readonly">
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>


                                <!--地区-->
                                <div class="card">
                                    <div class="card-header" id="heading2">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link  btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#slug-card">
                                                地区
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="slug-card" class="collapse">
                                        <div class="card-body">
                                            <div class="form-group">
                                                #for(item : addressList)
                                                <div>
                                                    <label>
                                                        <input type="radio" name="job.address_id" value="#(item.id)" #if(item.id ??==
                                                               job.address_id ??) checked #end/>
                                                        #(item.title ??)
                                                    </label>
                                                </div>
                                                #else
                                                暂无地区
                                                #end

                                            </div>

                                        </div>
                                    </div>
                                </div>


                                <!--分类-->
                                <div class="card">
                                    <div class="card-header" id="heading3">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#category-card">
                                                分类
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="category-card" class="collapse">
                                        <div class="card-body">
                                            <div class="form-group">
                                                #for(item : categoryList)
                                                <div>
                                                    <label>
                                                        #for(i = 0; i < item.layerNumber; i++)
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        #end

                                                        <input type="radio" name="job.category_id" value="#(item.id)" #if(item.id ??== job.category_id ??) checked #end/>
                                                        #(item.title ??)
                                                    </label>
                                                </div>
                                                #else
                                                暂无分类
                                                #end
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!--邮件-->
                                <div class="card">
                                    <div class="card-header" id="heading5">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link  btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#image-card">
                                                邮件
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="image-card" class="collapse">

                                        <div class="card-body">

                                            <div class="form-group row">
                                            <label class="col-sm-12">简历邮箱</label>
                                            <div class="col-sm-12">
                                                <input type="email" id="job.notify_emails" name="job.notify_emails" class="form-control"
                                                       value="#(job.notify_emails ??)"
                                                       placeholder="请输入接收简历邮箱">
                                            </div>
                                            </div>


                                            <div class="form-group row">
                                                <label class="col-sm-12">邮件标题</label>

                                                <div class="col-sm-12">
                                                <input type="text" id="job.notify_title" name="job.notify_title" class="form-control"
                                                       value="#(job.notify_title ??)"
                                                       placeholder="请输入邮件标题">
                                                    </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-12">邮件内容</label>
                                                <div class="col-sm-12">
                                                <textarea name="job.notify_content" class="form-control" placeholder="请输入邮件内容">#(job.notify_content ??)</textarea>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>


                                <!--类型-->
                                <div class="card">
                                    <div class="card-header" id="heading4">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#tags-card">
                                                类型
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="tags-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group row">
                                                <select class="form-control" name="job.education">
                                                    <option value="">请选择学历</option>
                                                    <option #if(job.education ??== 0) selected #end value="0">不限制学历</option>
                                                    <option #if(job.education ??== 1) selected #end value="1">初中及以下</option>
                                                    <option #if(job.education ??== 2) selected #end value="2">中专/中技</option>
                                                    <option #if(job.education ??== 3) selected #end value="3">高中</option>
                                                    <option #if(job.education ??== 4) selected #end value="4">大专</option>
                                                    <option #if(job.education ??== 5) selected #end value="5">本科</option>
                                                    <option #if(job.education ??== 6) selected #end value="6">硕士</option>
                                                    <option #if(job.education ??== 7) selected #end value="7">博士</option>
                                                </select>
                                            </div>


                                            <div class="form-group row">
                                                <select class="form-control" name="job.years_limit_type">
                                                    <option value="">请选择基层工作最低年限</option>
                                                    <option #if(job.years_limit_type ??== 0) selected #end value="0">不限</option>
                                                    <option #if(job.years_limit_type ??== 1) selected #end value="1">在校生</option>
                                                    <option #if(job.years_limit_type ??== 2) selected #end value="2">应届生</option>
                                                    <option #if(job.years_limit_type ??== 3) selected #end value="3">1年以内</option>
                                                    <option #if(job.years_limit_type ??== 4) selected #end value="4">1-3年</option>
                                                    <option #if(job.years_limit_type ??== 5) selected #end value="5">3-5年</option>
                                                    <option #if(job.years_limit_type ??== 6) selected #end value="6">5-10年</option>
                                                    <option #if(job.years_limit_type ??== 7) selected #end value="7">10年以上</option>
                                                </select>
                                            </div>

                                            <div class="form-group row">
                                                <select class="form-control" name="job.work_type">
                                                    <option value="">工作类型</option>
                                                    <option #if(job.work_type ??== 0) selected #end value="0">全职</option>
                                                    <option #if(job.work_type ??== 1) selected #end value="1">兼职</option>
                                                    <option #if(job.work_type ??== 2) selected #end value="2">钟点工</option>
                                                </select>
                                            </div>

                                            <div class="form-group row">
                                                <select class="form-control" name="job.recruit_type">
                                                    <option value="">招聘类型</option>
                                                    <option #if(job.recruit_type ??== 0) selected #end value="0">社招</option>
                                                    <option #if(job.recruit_type ??== 1) selected #end value="1">校招</option>
                                                    <option #if(job.recruit_type ??== 2) selected #end value="2">实习</option>
                                                </select>
                                            </div>


                                        </div>
                                    </div>
                                </div>


                                <!--SEO-->
                                <div class="card">
                                    <div class="card-header">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#seo-card">
                                                SEO
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="seo-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group">
                                                <label class="col-sm-12">SEO标题</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" placeholder="SEO标题"
                                                           name="job.meta_title" id="meta_title"
                                                           value="#(job.meta_title ??)">
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-12">SEO关键字</label>
                                                <div class="col-sm-12">
                                                    <textarea class="form-control" id="meta_keywords"
                                                              name="job.meta_keywords" placeholder="请输入"
                                                              rows="2">#(job.meta_keywords ??)</textarea>
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-12">SEO描述</label>
                                                <div class="col-sm-12">
                                                    <textarea class="form-control" id="meta_description"
                                                              name="job.meta_description" placeholder="请输入"
                                                              rows="2">#(job.meta_description ??)</textarea>
                                                    <p class="text-muted"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!--状态-->
                                <div class="card">
                                    <div class="card-header">
                                        <h2 class="mb-0">
                                            <button class="btn btn-link btn-block text-left text-dark" type="button"
                                                    data-toggle="collapse" data-target="#status-card">
                                                状态
                                                <span class="float-right"><i class="bi bi-chevron-down"></i></span>
                                            </button>
                                        </h2>
                                    </div>
                                    <div id="status-card" class="collapse">
                                        <div class="card-body">

                                            <div class="form-group row">
                                                <label class="col-sm-9" style="padding-top:7.5px;padding-left:15px">是否属于远程工作</label>
                                                <div class="col-sm-3">

                                                    <input type="checkbox" class="switchery" data-for="with_remote"
                                                           #checkedIf(job.with_remote
                                                           ??)>
                                                    <input type="hidden" id="with_remote" name="job.with_remote">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-9" style="padding-top:7.5px;padding-left:15px">是否是急招</label>
                                                <div class="col-sm-3">

                                                    <input type="checkbox" class="switchery" data-for="with_hurry"
                                                           #checkedIf(job.with_hurry
                                                           ??)>
                                                    <input type="hidden" id="with_hurry" name="job.with_hurry">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-9" style="padding-top:7.5px;padding-left:15px">是否允许在线投递</label>
                                                <div class="col-sm-3">

                                                    <input type="checkbox" class="switchery" data-for="with_apply"
                                                           #checkedIf(job.with_apply ??)>
                                                    <input type="hidden" id="with_apply" name="job.with_apply">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label class="col-sm-9" style="padding-top:7.5px;padding-left:15px">有新申请是否通知</label>
                                                <div class="col-sm-3">

                                                    <input type="checkbox" class="switchery" data-for="with_notify"
                                                           #checkedIf(job.with_notify ??)>
                                                    <input type="hidden" id="with_notify" name="job.with_notify">
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
#end
